<template>
  <div class="add_con">
    <div class="self_info">
      <div class="title_bold">基本信息</div>
      <div class="info_line">
        <div class="grid_info">
          <div class="left">出差部门</div>
          <div class="right">{{ checkForm.orgName }}</div>
        </div>
      </div>
      <div class="info_line">
        <div class="grid_info info_side">
          <div class="left">姓名</div>
          <div class="right">{{ checkForm.userName }}</div>
        </div>
        <div class="grid_info">
          <div class="left">职务</div>
          <div class="right">{{ checkForm.post }}</div>
        </div>
      </div>
      <div class="info_line">
        <div class="grid_info">
          <div class="left">陪同人员</div>
          <div class="right info_cell">
            <vanFieldCheckbox
              key="attendOrg"
              v-model="certifierInfoList"
              placeholder="请选择"
              :columns="userAllList"
              :selectValue="certifierInfoList"
              label-width="100"
              :option="{ label: 'accompanyName', value: 'accompanyId', label1: 'accompanyPost' }"
              @confirm="onConfirmOrg"
              :isSearch="true"></vanFieldCheckbox>
          </div>
        </div>
      </div>
    </div>
    <div class="box_info">
      <div class="title_bold">出差信息</div>
      <div class="info_line">
        <div class="grid_info info_input">
          <div class="left">出差事由</div>
          <div class="right">
            <van-field
              class="scroe_input"
              v-model="checkForm.reimburseReason"
              rows="4"
              autosize
              type="textarea"
              :placeholder="'请输入'"
              maxlength="50"
              show-word-limit />
          </div>
        </div>
      </div>
      <div class="info_line">
        <div class="grid_info info_time">
          <div class="left">出差开始时间</div>
          <div class="right info_cell" @click="chooseTimeDuty('0')">
            <van-cell :value="checkForm.startTime ? checkForm.startTime.slice(0, -3) : '选择时间'" is-link />
          </div>
        </div>
      </div>
      <div class="info_line">
        <div class="grid_info info_time">
          <div class="left">出差结束时间</div>
          <div class="right info_cell" @click="chooseTimeDuty('1')">
            <van-cell
              :value="
                !checkForm.startTime
                  ? '请先选择开始时间'
                  : checkForm.endTime
                  ? checkForm.endTime.slice(0, -3)
                  : '选择时间'
              "
              is-link />
          </div>
        </div>
      </div>
      <div class="info_line">
        <div class="grid_info">
          <div class="left">出发地</div>
          <div class="right info_cell">
            <van-field
              class="scroe_input"
              v-model="checkForm.startPlace"
              :placeholder="'请输入'"
              maxlength="30"
              autosize
              rows="1"
              type="textarea" />
          </div>
        </div>
      </div>
      <div class="info_line">
        <div class="grid_info">
          <div class="left">目的地</div>
          <div class="right info_cell">
            <van-field
              class="scroe_input"
              v-model="checkForm.leavePlace"
              :placeholder="'请输入'"
              maxlength="30"
              autosize
              rows="1"
              type="textarea" />
          </div>
        </div>
      </div>
      <div class="info_line">
        <div class="grid_info">
          <div class="left">交通工具</div>
          <div class="right">
            <van-radio-group v-model="checkForm.transportation" direction="horizontal" @change="radioChange">
              <van-radio name="1">公共交通-火车/高铁/客车/飞机</van-radio>
              <van-radio name="2">公车</van-radio>
              <van-radio name="3">平台租赁</van-radio>
              <van-radio name="4">其他(请注明)</van-radio>
            </van-radio-group>
          </div>
        </div>
      </div>
      <div class="info_line" v-if="checkForm.transportation === '4'">
        <div class="grid_info">
          <div class="left">其他说明</div>
          <div class="right info_cell">
            <van-field
              class="scroe_input"
              v-model="checkForm.transportationRemark"
              :placeholder="'请输入'"
              maxlength="20"
              autosize
              rows="1"
              type="textarea" />
          </div>
        </div>
      </div>
    </div>
    <div class="box_info">
      <div class="title_bold">
        <span>*</span>
        附件
      </div>
      <div class="info_line">
        <div class="grid_info grid_annex">
          <div class="right">
            <ImgUpload v-bind:albumList.sync="checkForm.enclosureList" fileTips="提示：请上传出差证明材料" />
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="fead_boot">
      <van-button plain type="info" @click="saveData('0')" v-if="checkForm.saveStatus !== '1'">暂存</van-button>
      <van-button type="info" @click="saveData('1')">提交</van-button>
      <van-button type="danger" @click="btnCheck('4')" v-if="checkForm.canRevoke === '1'">撤回</van-button>
      <van-button type="danger" @click="btnCheck('5')" v-if="checkForm.isCanZZ === '1'">终止</van-button>
    </div>
    <van-popup v-model="showTimeDuty" position="bottom">
      <div class="pop_days">
        <van-datetime-picker
          v-model="currentDayDuty"
          type="datetime"
          @cancel="showTimeDuty = false"
          @confirm="timeConfirmDuty"
          :min-date="minDate"
          :max-date="maxDate" />
      </div>
    </van-popup>
  </div>
</template>

<script>
import moment from 'moment'
import { addTripReimburse, getTripReimburseDetail, updateTripReimburse, getAllUserList } from '@api/api-dailyManage.js'
import ImgUpload from '@com/ImgUpload'
import VanFieldCheckbox from '@com/VanFieldCheckbox'
export default {
  name: 'checkAdd',
  components: {
    ImgUpload,
    VanFieldCheckbox,
  },
  data() {
    return {
      moment: moment,
      userInfo: JSON.parse(localStorage.userInfo),
      checkForm: {
        id: '',
        formTitle: '出差审批表',
        formType: '1',
        accompanyList: [{ accompanyName: '', accompanyPost: '' }],
        reimburseReason: '',
        startTime: '',
        endTime: '',
        startPlace: '',
        leavePlace: '',
        transportation: '',
        isUseCar: '0',
        transportationRemark: '',
        userId: localStorage.userId,
        userName: JSON.parse(localStorage.userInfo).userName,
        orgId: JSON.parse(localStorage.userInfo).loginPostInfo.orgId,
        orgName: JSON.parse(localStorage.userInfo).loginPostInfo.orgName,
        post: JSON.parse(localStorage.userInfo).loginPostInfo.postName,
        enclosureList: [],
      },
      showTimeDuty: false,
      minDate: new Date(2022, 11, 1),
      maxDate: new Date(moment().add(1, 'year').format('YYYY'), 11, 31),
      currentDayDuty: new Date(), // 日期
      timeType: '0', // 0：开始时间；1：结束时间
      editId: '',
      certifierInfoList: [],
      userAllList: [],
    }
  },
  watch: {},
  created() {
    this.editId = this.$route.query.id || ''
    if (this.editId) {
      this.getTripReimburseDetail()
    }
    this.getAllUserList()
  },
  mounted() {},
  destroyed() {},
  methods: {
    goback() {
      this.$router.go(-1)
    },
    saveData(type) {
      if (type === '1') {
        if (!this.checkForm.reimburseReason.trim().length) {
          return this.$toast.fail('请输入出差事由')
        }
        if (!this.checkForm.startTime) {
          return this.$toast.fail('请选择出差开始时间')
        }
        if (!this.checkForm.endTime) {
          return this.$toast.fail('请选择出差结束时间')
        }
        if (!this.checkForm.startPlace.trim().length) {
          return this.$toast.fail('请输入出发地')
        }
        if (!this.checkForm.leavePlace.trim().length) {
          return this.$toast.fail('请输入目的地')
        }
        if (!this.checkForm.transportation) {
          return this.$toast.fail('请选择交通工具')
        }
        if (this.checkForm.transportation === '4' && !this.checkForm.transportationRemark.trim().length) {
          return this.$toast.fail('请注明其他类型交通工具')
        }
        if (this.checkForm.enclosureList.length === 0) {
          return this.$toast.fail('请上传相关附件')
        }
      }
      this.checkForm.isUseCar = this.checkForm.transportation === '3' ? '1' : '0'
      const accompanyList = []
      this.certifierInfoList.forEach(item => {
        const arr = this.userAllList.filter(li => {
          return li.accompanyId === item
        })
        accompanyList.push(arr[0])
      })
      const param = {
        ...this.checkForm,
        year: moment().format('YYYY'),
        saveStatus: type,
        accompanyList,
        transportationRemark: this.checkForm.transportation === '4' ? this.checkForm.transportationRemark : '',
      }
      if (!this.checkForm.id && this.editId) {
        param.id = this.editId
      }
      if (type === '1') {
        this.$dialog
          .confirm({
            message: '请确认当前出差信息是否正确，确定后不可修改。',
          })
          .then(() => {
            this.submitForm(type, param)
          })
          .catch(() => {})
      } else {
        this.submitForm(type, param)
      }
    },
    radioChange() {},
    timeConfirmDuty(value) {
      if (this.timeType === '0') {
        this.checkForm.startTime = moment(value).format('YYYY-MM-DD HH:mm:ss')
      } else {
        this.checkForm.endTime = moment(value).format('YYYY-MM-DD HH:mm:ss')
      }
      this.showTimeDuty = false
    },
    chooseTimeDuty(type) {
      this.timeType = type
      this.minDate = new Date(2022, 11, 1)
      this.maxDate = new Date(moment().add(1, 'year').format('YYYY'), 11, 31)
      if (type === '0') {
        if (this.checkForm.endTime) {
          this.maxDate = new Date(this.checkForm.endTime)
        }
      } else {
        if (this.checkForm.startTime) {
          this.minDate = new Date(this.checkForm.startTime)
        } else {
          return
        }
      }
      this.showTimeDuty = true
    },
    getTripReimburseDetail() {
      getTripReimburseDetail({
        id: this.editId,
      }).then(res => {
        if (res.code === 0) {
          this.checkForm = res.data
          if (this.checkForm.accompanyList.length) {
            const arr = []
            this.checkForm.accompanyList.forEach(item => {
              arr.push(item.accompanyId)
            })
            this.certifierInfoList = arr
          }
        }
      })
    },
    submitForm(type, param) {
      if (this.editId) {
        updateTripReimburse(param).then(res => {
          if (res.code === 0) {
            if (type === '0') {
              this.$toast.success('暂存成功')
            } else {
              this.$toast.success('提交成功')
              setTimeout(() => {
                this.$router.go(-1)
              }, 500)
            }
          }
        })
      } else {
        addTripReimburse(param).then(res => {
          if (res.code === 0) {
            if (type === '0') {
              this.editId = res.data
              this.$toast.success('暂存成功')
            } else {
              this.$toast.success('提交成功')
              setTimeout(() => {
                this.$router.go(-1)
              }, 500)
            }
          }
        })
      }
    },
    getAllUserList() {
      getAllUserList().then(res => {
        const userArr = []
        res.data.forEach(item => {
          userArr.push({
            accompanyId: item.userId,
            accompanyName: item.userName,
            accompanyPost: item.post || '',
          })
        })
        const i = userArr.findIndex(item => {
          return item.accompanyId === this.userInfo.userId
        })
        userArr.splice(i, 1)
        this.userAllList = userArr
      })
    },
    onConfirmOrg(val, list) {
      // console.log('val :>> ', val)
      // console.log('list :>> ', list)
      this.checkForm.accompanyList = list
    },
    btnCheck(type) {
      const str = type === '4' ? '确认撤回该审批表吗？' : '确认终止该审批表吗？'
      const str1 = type === '4' ? '撤回成功' : '终止成功'
      this.$dialog
        .confirm({
          message: str,
        })
        .then(() => {
          approveFormExpense({
            content: '',
            id: this.checkForm.id,
            processInstanceId: this.checkForm.processInstanceId || '',
            status: type,
            taskId: this.checkForm.taskId || '',
          }).then(res => {
            if (res.code === 0) {
              this.$toast.success(str1)
              setTimeout(() => {
                this.$router.go(-1)
              }, 500)
            }
          })
        })
        .catch(() => {})
    },
  },
}
</script>

<style lang="scss" scoped>
.add_con {
  .title_bold {
    font-weight: 800;
    font-size: 15px;
    span {
      color: #d9001b;
    }
  }
  .self_info {
    width: 100%;
    background-color: #ffffff;
    padding: 10px;
    box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
    border-radius: 5px;
    margin-top: 10px;
  }
  .info_line {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .grid_info {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 7px 0;
      border-bottom: 1px solid #d7d7d7;
      .left {
        font-size: 14px;
        width: 65px;
        background-image: linear-gradient(#ffffff 50%, #f9f1e8);
        color: #333333;
        text-align: center;
      }
      .right {
        flex: 1;
        text-align: right;
      }
    }
    .info_side {
      margin-right: 10px;
    }
    .info_time {
      .left {
        width: 100px;
      }
    }
    .grid_annex {
      width: 100%;
      .right {
        width: 100%;
        text-align: left;
      }
    }
  }
  .info_cell {
    margin-left: 5px;
    /deep/.van-cell {
      display: flex;
      align-items: center;
      font-size: 12px;
      .van-icon-arrow {
        display: flex;
        align-items: center;
      }
    }
    /deep/.van-cell__value {
      text-align: right;
      padding-right: 10px;
      color: #999999;
    }
    /deep/.van-field__control {
      text-align: right;
    }
  }
  .box_info {
    background-color: #ffffff;
    padding: 10px;
    box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
    border-radius: 5px;
    margin-top: 10px;

    .info_input {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      .right {
        border: 1px solid #efefef;
        margin-top: 10px;
        width: 100%;
        .scroe_input {
          padding: 0 5px;
          width: 100%;
          height: auto;
          line-height: 20px;
          font-size: 12px;
          resize: none;
        }
      }
    }
    .van-radio-group {
      .van-radio {
        margin-left: 20px;
        margin-bottom: 7px;
      }
    }
  }
  .fead_boot {
    .van-button {
      height: 36px;
      width: 28%;
    }
  }
}
</style>
